<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    <title></title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        ul{
            padding: 0;
        }
        li{
            list-style: none;
        }
        .wrapper{
            width: 1000px;
            margin: 0 auto;
        }
        .comment{
            background-color: #edecec;
            margin-top: 100px;
        }

        .article{
            padding-top: 50px;
        }

        .comment p{
            font-size: 15px;
            color: #FB7299;
        }
        .content span{
            font-size: 14px;
            color: #18191c;
        }
        .comment .comment-content{
            padding: 10px 0;
            width: 668px;
            height: 100px;
            border-bottom: 1px solid #ede8e8;
        }

.article h3{
    padding-bottom: 20px;
}
    </style>
</head>
<body>

    <div class="article wrapper">
        <h3 th:text="${article.title}"></h3>
        <p th:text="${article.content}"></p>
    </div>
    <div class="comment" >
       <div class="wrapper">
           <div class="comment-content" th:each="comment:${commentList}">
               <p th:text="${comment.author}"></p>
               <span  th:text="${comment.content}">></span>
           </div>

       </div>


    </div>
    <div class="container mt-3 wrapper">
        <form th:action="@{'/comment/add/'+${article.id}}" method="post">
            <div class="mb-3 mt-3">
                <label for="author" class="form-label">请输入昵称</label>
                <input type="text" class="form-control" id="author" placeholder="请输入昵称" name="author">
            </div>
            <div class="mb-3 mt-3">
                <label for="content">请输入评论：</label>
                <textarea class="form-control" rows="5" id="content" name="content"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
</body>
</html>